<template>
  <div class="progress-container">
    <CaseProgressTimeline
      :progress-list="progressList"
      @add-progress="handleAddProgress"
      @delete-progress="handleDeleteProgress"
    />
  </div>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits } from 'vue'
  import CaseProgressTimeline from './CaseProgressTimeline.vue'
  import type { Progress } from '@/types/lawcase'

  const props = defineProps<{
    progressList: Progress[]
  }>()

  const emit = defineEmits(['add-progress', 'delete-progress'])

  const handleAddProgress = () => {
    emit('add-progress')
  }

  const handleDeleteProgress = () => {
    emit('delete-progress')
  }
</script>

<style scoped>
  .progress-container {
    padding: 10px 0;
  }
</style>
